<template>
  <div class="root">
    <div class="header">
      <!-- 日销售统计 -->
      <div class="dayStatistics">
        <p class="title">日销售统计</p>

        <div class="data">
          <ul>
            <li>
              <p class="num">{{ dayCount }}</p>
              <p class="type">当日销售量(个)</p>
            </li>
            <li>

              <p class="num">{{ dayIncome }}</p>
              <p class="type">当日销售额(元)</p>
            </li>

            <li>
              <p class="num">{{ dayPercent }}</p>
              <p class="type">当日分成(元)</p>
            </li>
          </ul>
        </div>
      </div>

      <!-- 月销售统计 -->
      <div class="monthStatistics">
        <p class="title">月销售统计</p>

        <div class="data">
          <ul>
            <li>
              <p class="num">{{ orderCountStatistics }}</p>
              <p class="type">当月销售量(个)</p>
            </li>

            <li>
              <p class="num">{{ (orderTotalMoneyStatistics / 100).toFixed(2) }}</p>
              <p class="type">当月销售额(元)</p>
            </li>

            <li>
              <p class="num">{{ (totalBillStatistics / 100).toFixed(2) }}</p>
              <p class="type">当月分成(元)</p>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="content">
      <div class="search">
        <span>
          <i>合作商:</i>
          <el-select v-model="pageObj.partnerName" clearable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.name"
              :label="item.name"
              :value="item.name"
            />
          </el-select>
        </span>

        <span>
          <i style="margin-left: 16px">日期:</i>
          <el-date-picker
            v-model="date"
            type="daterange"
            value-format="yyyy-MM-dd"
            class="date"
            range-separator="~"
          />

        </span>

        <el-button
          class="searchBtn"
          type="primary"
          icon="el-icon-search"
          @click="search"
        >查询</el-button>

      </div>

      <div class="statistics">
        <div class="classify">
          <span>笔数统计:</span>
          <i class="count">{{ count }}</i>
          <span class="unit">个</span>
        </div>

        <div class="classify">
          <span>收入统计:</span>
          <i class="count">{{ (income / 100).toFixed(2) }}</i>
          <span class="unit">元</span>
        </div>

        <div class="classify">
          <span>分成统计:</span>
          <i class="count">{{ (percent / 100).toFixed(2) }}</i>
          <span class="unit">元</span>
        </div>

      </div>

      <div class="table">
        <el-table
          :data="tableData"
          style="width: 100%"
        >
          <el-table-column
            prop="date"
            label="订单日期"
            align="center"
          />

          <el-table-column
            prop="ownerName"
            label="合作商"
            align="center"
          />

          <el-table-column
            label="分成比例"
            align="center"
          >
            <template #default="{ row }">
              {{ row.ratio + '%' }}
            </template>
          </el-table-column>

          <el-table-column
            label="收入(元)"
            align="center"
          >
            <template #default="{ row }">
              {{ '+' + (row.orderTotalMoney / 100 ).toFixed(2) }}
            </template>
          </el-table-column>

          <el-table-column
            prop="orderCount"
            label="笔数"
            align="center"
          />

          <el-table-column
            label="分成金额(元)"
            align="center"
          >
            <template #default="{ row }">
              {{ '+' + row.totalBill / 100 }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 分页 -->
    <div v-if="totalCount > 10" class="footer">
      <div class="left">
        <span>共{{ totalCount }}条记录</span>
        <span>第 {{ pageObj.pageIndex }}/{{ totalPage }} 页</span>
      </div>

      <div class="right">
        <button
          class="previous"
          :class="{isGrey: pageObj.pageIndex === 1}"
          :disabled="pageObj.pageIndex === 1"
          @click="previousPage"
        >上一页</button>

        <button
          class="next"
          :class="{isGrey: pageObj.pageIndex == totalPage}"
          :disabled="pageObj.pageIndex == totalPage"
          @click="nextPage"
        >下一页</button>
      </div>
    </div>
  </div></template>

<script>
import { dateInit } from '@/utils/sameMonth'
import { getReconciliationList, getCooperationList, getOrderTotal, getIncome, getTotalBill } from '@/api/reconciliation'
export default {
  name: '',
  components: {

  },
  props: {
  },
  data() {
    return {
      date: [],
      options: [],
      tableData: [],
      totalCount: null,
      totalPage: null,
      pageObj: {
        pageIndex: 1,
        pageSize: 10,
        partnerName: null
      },
      //  日销售统计
      dayCount: 0,
      dayIncome: 0,
      dayPercent: 0,

      // 月销售统计
      orderCountStatistics: 0,
      orderTotalMoneyStatistics: 0,
      totalBillStatistics: 0,

      // 笔数，收入，分成统计
      count: 0,
      income: 0,
      percent: 0
    }
  },

  computed: {

  },

  async created() {
    // 默认时间范围(当月)
    this.date = dateInit()
    this.getList()

    // 合作商列表
    const res = await getCooperationList()
    this.options = res

    // 当月销售量
    const orderCountStatistics = await getOrderTotal({
      start: `${this.date[0]} 00:00:00`,
      end: `${this.date[1]} 23:59:59`
    })
    this.orderCountStatistics = orderCountStatistics
    this.count = orderCountStatistics

    // 当月销售额
    const orderTotalMoneyStatistics = await getIncome({
      start: `${this.date[0]} 00:00:00`,
      end: `${this.date[1]} 23:59:59`
    })
    this.orderTotalMoneyStatistics = orderTotalMoneyStatistics
    this.income = orderTotalMoneyStatistics

    // 当月分成
    const totalBillStatistics = await getTotalBill({
      start: `${this.date[0]} 00:00:00`,
      end: `${this.date[1]} 23:59:59`
    })
    this.totalBillStatistics = totalBillStatistics
    this.percent = totalBillStatistics

    // 当日销售量
    const dayCount = await getOrderTotal({
      start: `${this.date[1]} 00:00:00`,
      end: `${this.date[1]} 23:59:59`
    })
    this.dayCount = dayCount

    // 当日销售额
    const dayIncome = await getIncome({
      start: `${this.date[1]} 00:00:00`,
      end: `${this.date[1]} 23:59:59`
    })
    this.dayIncome = dayIncome

    // 当日分成
    const dayPercent = await getTotalBill({
      start: `${this.date[1]} 00:00:00`,
      end: `${this.date[1]} 23:59:59`
    })
    this.dayPercent = dayPercent
  },

  methods: {
    async getList() {
      const data = await getReconciliationList({
        ...this.pageObj,
        start: this.date[0],
        end: this.date[1]
      })
      this.totalPage = data.totalPage
      this.totalCount = data.totalCount
      console.log(data)
      this.tableData = data.currentPageRecords
    },

    async search() {
      this.getList()
      // 笔数统计
      const orderCountStatistics = await getOrderTotal({
        start: `${this.date[0]} 00:00:00`,
        end: `${this.date[1]} 23:59:59`
      })
      this.count = orderCountStatistics

      // 收入统计
      const orderTotalMoneyStatistics = await getIncome({
        start: `${this.date[0]} 00:00:00`,
        end: `${this.date[1]} 23:59:59`
      })
      this.income = orderTotalMoneyStatistics

      // 分成统计
      const totalBillStatistics = await getTotalBill({
        start: `${this.date[0]} 00:00:00`,
        end: `${this.date[1]} 23:59:59`
      })
      this.percent = totalBillStatistics
    },

    previousPage() {
      this.pageObj.pageIndex -= 1
      this.getList()
    },

    nextPage() {
      this.pageObj.pageIndex += 1
      this.getList()
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-table td, .el-table th.is-leaf{
  border-bottom: none;
}
*{
  margin: 0;
  padding: 0;
}
.isGrey{
background-color: #edf0f9 !important;
 color: #d8dde6 !important;
 cursor: not-allowed !important;
}
ul{
  list-style: none;
}
 .root{
  padding:  20px;
.header{
  display: flex;
  justify-content: space-between;
}
  .dayStatistics,
  .monthStatistics
  {

    width: 49%;
    height: 168px;
    padding: 20px;
    border-radius: 20px;

    .data{
      margin-top: 30px;
      ul{
        display: flex;
        justify-content: space-around;
        li{
          display: flex;
          flex-direction: column;
          align-items: center;
          .num{
            font-size: 36px;
            font-weight: 600;
            color: #072074;
            text-shadow: 2px 4px 7px rgba(85,132,255,5);
            margin-bottom: 10px;
          }
          .type{
            font-size: 12px;
            font-weight: 400;
            color: #91a7dc;
          }
        }
      }
    }
  }

  .dayStatistics{
     background: #e9f3ff;
     background-image: url(), url(https://likede2-admin.itheima.net/img/day.4272ef60.png);
     background-repeat: no-repeat;
     background-position: 0 0,calc(100% - 12px) 100%;
  }

  .monthStatistics{
      background: #fbefe8 url(https://likede2-admin.itheima.net/img/month.5c71f45f.png) no-repeat calc(100% - 12px)  100%;
      .num{
        color: #ff5757 !important;
        text-shadow: 2px 4px 7px rgba(255,99,85,.5) !important;
      }
      .type{
        color: #de9690 !important;
      }
  }

  .content{
    width: 100%;
    background-color: #fff;
    margin-top: 20px;
    padding: 16px;
    .search{
      i{
        font-style: normal;
        font-size: 14px;
        color: #606266;
        margin-right: 20px;
      }
      .searchBtn{
        width: 80px;
        height: 38px;
        font-size: 14px;
        background-color: #5f84ff;
        border: none;
        border-radius: 4px;
        color: #fff;
        margin-left: 12px;
      }

    }

    .statistics{
      margin-top: 30px;
      .classify{
        display: inline;
        span{
          font-size: 14px;
          color: #333;
          font-weight: 500;
          margin-right: 20px;
        }
        .count{
          font-size: 20px;
          font-style: normal;
          color: #ff5757;
          font-weight: 600;
          margin-right: 10px;
        }
        .unit{
          font-size: 12px;
          margin-right: 50px;
          color: #000;
        }
      }
    }

    .table{
      margin-top: 20px;
    }
  }

  .footer{
    display: flex;
    justify-content: space-between;

.left{
  margin-left: 36px;
  color: #d8dde3;
  span{
    margin: 0 6px;
  }
}
    .right{
      .previous,
      .next{
        width: 70px;
        height: 32px;
        margin: 0 16px;
        border: none;
        font-size: 13px;
        background-color: #d5ddf8;
        border-radius: 2px;
        cursor: pointer;
      }
    }
  }

 }

 ::v-deep .el-input__inner{
        width: 220px;
      }

      .date{
        width: 460px !important;
      }

</style>
